<template>
  <div class="cart_item">
    <div class="cart_column column_1">
      <el-checkbox class="my_el_checkbox" v-model="course.selected"></el-checkbox>
    </div>
    <div class="cart_column column_2">
      <img :src="$settings.Host+course.course_img" alt="">
      <span><router-link :to="`/course/${course.course_id}`">{{course.course_name}}</router-link></span>
    </div>
    <div class="cart_column column_3">
      <el-select v-model="course.expire_time" size="mini" placeholder="请选择购买有效期" class="my_el_select">
        <el-option v-for="item in course.expire_list" :label="item.text" :value="item.expire"
                   :key="item.expire"></el-option>
      </el-select>
    </div>
    <div class="cart_column column_4">¥{{course.price.toFixed(2)}}</div>
    <div class="cart_column column_4 column_5"><span class="cart_delete" @click="deleteHandle">删除</span></div>
  </div>
</template>

<script>
    export default {
        name: "CartItem",
        props: ["course", "token", "course_key"],
        data() {
            return {
                expire: "1个月有效",
            }
        },
        watch: {
            "course.selected": function () {
                this.change_selected();
            },
            "course.expire_time": function () {
                this.change_expire();
            }
        },
        methods: {
            change_selected() {
                // 切换商品的勾选状态
                this.$axios.put(`${this.$settings.Host}/cart/`, {
                    course_id: this.course.course_id,
                    selected: this.course.selected
                }, {
                    headers: {
                        Authorization: "jwt " + this.token,
                    }
                }).then(response => {
                    // this.$message.success("切换勾选状态成功！");
                    // 通知父组件重新计算价格
                    this.$emit("calc_total")
                }).catch(error => {
                    this.$message.error("切换勾选状态失败！");
                })
            },
            deleteHandle() {
                // 删除商品操作
                this.$axios.delete(`${this.$settings.Host}/cart/`, {
                    params: {
                        course_id: this.course.course_id,
                    },
                    headers: {
                        Authorization: "jwt " + this.token,
                    }
                }).then(response => {
                    this.$message.success("删除商品成功！");
                    // 告诉父组件删除当前子组件
                    this.$emit("del_cart", this.course_key);
                }).catch(error => {
                    this.$message.error("删除商品失败！");
                })
            },
            change_expire() {
                // 切换有效期

                // 修改当前课程的价格
                for (let item of this.course.expire_list) {
                    if (item.expire === this.course.expire_time) {
                        this.course.price = item.price;
                        this.$axios.patch(`${this.$settings.Host}/cart/`, {
                            course_id: this.course.course_id,
                            expire: this.course.expire_time,
                        }, {
                            headers: {
                                Authorization: "jwt " + this.token,
                            }
                        }).then(response => {
                            // 通知父组件重新计算价格
                            this.$emit("calc_total");
                        }).catch(error => {
                            this.$message.error("当前课程的有效期选项切换失败！");
                        });
                    }
                }
            }
        }
    }
</script>

<style scoped>
  .cart_item::after {
    content: "";
    display: block;
    clear: both;
  }

  .cart_column {
    float: left;
    height: 250px;
  }

  .cart_item .column_1 {
    width: 88px;
    position: relative;
  }

  .my_el_checkbox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 16px;
    height: 16px;
  }

  .cart_item .column_2 {
    padding: 67px 10px;
    width: 520px;
    height: 116px;
  }

  .cart_item .column_2 img {
    width: 175px;
    height: 115px;
    margin-right: 35px;
    vertical-align: middle;
  }

  .cart_item .column_3 {
    width: 197px;
    position: relative;
    padding-left: 10px;
  }

  .my_el_select {
    width: 117px;
    height: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .cart_item .column_4 {
    padding: 67px 10px;
    height: 116px;
    width: 142px;
    line-height: 116px;
  }

  .cart_item .column_5 {
    color: #ffc210;
  }

  .cart_delete {
    cursor: pointer;
  }
</style>
